import Taro, {Component} from '@tarojs/taro';
import {View, Text, Button} from '@tarojs/components';
import {connect} from '@tarojs/redux';
import {getTopicInfo, admireTopic} from '../../actions/topiclist';
import Replies from '../../components/topicinfo/replies';
import TopicInfo from '../../components/topicinfo/topicinfo';

@connect(function(store){
    return {
        user: store.user, 
        topicinfo: store.topiclist.topicinfo, 
        replies: store.topiclist.replies,
        admireState: store.topiclist.admireState
    }
},function(dispatch){
    return {getTopicInfo(params) {
        dispatch(getTopicInfo(params))
    }, admireTopic(params) {
        dispatch(admireTopic(params))
    }}
})
class Detail extends Component {
    config = {
        navigationBarTitleText: '话题详情'
    }

    componentWillMount() {
        this.getDetail();
    }

    // 获取页面内容
    getDetail() {
        let {user} = this.props;
        let params = {id: this.$router.params.topicid, mdrender: true, accesstoken: user.accesstoken}
        this.props.getTopicInfo && this.props.getTopicInfo(params) 
    }

    // 点赞
    admire(reply) {
        console.log('点赞');
        // API 被下架了
        // let {user} = this.props;
        // let params = {replyid: reply.id, accesstoken: user.accesstoken}
        // this.props.admireTopic && this.props.admireTopic(params)
    }

    componentWillReceiveProps(nextPorps) {
        if (this.props.admireState != nextPorps.admireState) {
            // 发生变化 请求数据
            this.getDetail();
        }
    }



    render() {
        let {topicinfo, replies} = this.props;
        return (<View>
                <TopicInfo topicinfo={topicinfo} />
                <Replies replies={replies} onAdmire={this.admire.bind(this)}/>
            </View>)
    }
}

export default Detail;